<template>
  <div class="container">
    <!-- 左右两栏布局 -->
    <div class="qweather-layout d-flex align-items-start justify-content-between" style="height:auto!important">
      <!-- 左侧列表 -->
      <div class="qweather-list" style="height:auto!important">
            
            <!-- 生活指数详情 -->
            <div class="qweather-list__row">
              <div class="c-city-indices-detail">
                <div class="indices-detail__top">
                  <!-- 生活指数网格 -->
                  <div class="indices-grid">
                    <div class="indices-detail-top__item jsIndicesType" :class="{ active: selectedIndex === 'comf' }" @click="selectIndex('comf')">
                      <div class="indices-icons comf"></div>
                      <p>舒适度</p>
                    </div>
                    <div class="indices-detail-top__item jsIndicesType" :class="{ active: selectedIndex === 'cw' }" @click="selectIndex('cw')">
                      <div class="indices-icons cw"></div>
                      <p>洗车</p>
                    </div>
                    <div class="indices-detail-top__item jsIndicesType" :class="{ active: selectedIndex === 'drsg' }" @click="selectIndex('drsg')">
                      <div class="indices-icons drsg"></div>
                      <p>穿衣</p>
                    </div>
                    <div class="indices-detail-top__item jsIndicesType" :class="{ active: selectedIndex === 'flu' }" @click="selectIndex('flu')">
                      <div class="indices-icons flu"></div>
                      <p>感冒</p>
                    </div>
                    <div class="indices-detail-top__item jsIndicesType" :class="{ active: selectedIndex === 'sport' }" @click="selectIndex('sport')">
                      <div class="indices-icons sport"></div>
                      <p>运动</p>
                    </div>
                    <div class="indices-detail-top__item jsIndicesType" :class="{ active: selectedIndex === 'trav' }" @click="selectIndex('trav')">
                      <div class="indices-icons trav"></div>
                      <p>旅游</p>
                    </div>
                    <div class="indices-detail-top__item jsIndicesType" :class="{ active: selectedIndex === 'uv' }" @click="selectIndex('uv')">
                      <div class="indices-icons uv"></div>
                      <p>紫外线</p>
                    </div>
                    <div class="indices-detail-top__item jsIndicesType" :class="{ active: selectedIndex === 'air' }" @click="selectIndex('air')">
                      <div class="indices-icons air"></div>
                      <p>空气污染扩散</p>
                    </div>
                  </div>
                </div>
                
                <!-- 生活指数说明文字 -->
                <p class="indices-detail__txt jsIndicesTxt" :class="`jsIndicesTxt${currentIndexData.className}`">
                  {{ currentIndexData.description }}
                </p>
                
                <!-- 生活指数预报 -->
                <div class="indices-detail__forecast--bg jsIndicesDetail" :class="`jsIndicesDetail${currentIndexData.className}`">
                  <div class="indices-detail__forecast">
                    <!-- 今天 -->
                    <div class="indices-forecast__row d-flex">
                      <div class="indices-forecast__space">
                        <div class="week-date">
                          <p>今天</p>
                          <p>09月15日</p>
                        </div>
                      </div>
                      <div class="indices-forecast__detail">
                        <p class="indices-forecast__tag" :class="currentIndexData.today.levelClass">{{ currentIndexData.today.level }}</p>
                        <p class="indices-forecast__txt">{{ currentIndexData.today.content }}</p>
                      </div>
                    </div>
                    
                    <!-- 未来三天 -->
                    <div v-for="(day, index) in currentIndexData.future" :key="index" class="indices-forecast__row d-flex">
                      <div class="indices-forecast__space">
                        <div class="week-date">
                          <p>{{ day.week }}</p>
                          <p>{{ day.date }}</p>
                        </div>
                      </div>
                      <div class="indices-forecast__detail">
                        <p class="indices-forecast__tag" :class="day.levelClass">{{ day.level }}</p>
                        <p class="indices-forecast__txt">{{ day.content }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
      </div>

      <!-- 右侧菜单 -->
      <div class="qweather-menu" style="height:auto!important">
        <!-- 占位内容 -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'

// API配置
const API_KEY = '78db6a9c3b4d445881d8fa1ba2d0fa8a'
const API_BASE_URL = 'https://pr6yvxwd8j.re.qweatherapi.com'

// 当前位置
const currentLocation = ref({
  longitude: 114.40,
  latitude: 30.50,
  city: '武汉市',
  district: '洪山区'
})

// 是否正在加载
const loading = ref(true)

// 当前选中的指数
const selectedIndex = ref('comf')

// 生活指数类型对应关系 - 根据和风天气API文档
const indexTypes = {
  comf: { type: '8', name: '舒适度' },    // 舒适度指数
  cw: { type: '2', name: '洗车' },       // 洗车指数
  drsg: { type: '3', name: '穿衣' },     // 穿衣指数
  flu: { type: '9', name: '感冒' },      // 感冒指数
  sport: { type: '1', name: '运动' },    // 运动指数
  trav: { type: '6', name: '旅游' },     // 旅游指数
  uv: { type: '5', name: '紫外线' },     // 紫外线指数
  air: { type: '10', name: '空气污染扩散' } // 空气污染扩散条件指数
}

// 所有指数的数据
const indexData = ref({
  comf: {
    name: '舒适度',
    className: 'Comfort',
    description: '舒适度指数是描述天气对人体的综合影响指标之一，它表征人体在多种天气条件下感觉舒适的程度，人们可根据当天的指数预报适当地安排室外的生产或活动以及如何防范冷热突变，加强自我保健。',
    today: {
      level: '非常不舒适',
      levelClass: 'indices-comf-level--7',
      content: '白天天气晴好、炎热，您会感到酷热难耐，非常不适，请注意防暑降温。'
    },
    future: [
      {
        week: '周二',
        date: '09月16日',
        level: '非常不舒适',
        levelClass: 'indices-comf-level--7',
        content: '白天多云、但天气炎热，在这种天气条件下，您会感到酷热难耐，非常不适，请注意防暑降温。'
      },
      {
        week: '周三',
        date: '09月17日',
        level: '较舒适',
        levelClass: 'indices-comf-level--2',
        content: '白天有少量降雨，但会使人们感觉有些热，不过大部分人仍会有比较舒适的感觉。'
      },
      {
        week: '周四',
        date: '09月18日',
        level: '舒适',
        levelClass: 'indices-comf-level--1',
        content: '白天不太热也不太冷，风力不大，相信您在这样的天气条件下，应会感到比较清爽和舒适。'
      }
    ]
  },
  cw: {
    name: '洗车',
    className: 'Car',
    description: '洗车指数是根据过去12小时和未来48小时有无雨雪天气，路面是否有积雪和泥水，是否容易使汽车溅上泥水，是否有沙尘等天气条件，给驾驶员朋友提供是否适宜洗车的气象指数。洗车指数共分为4级，级数越高，就越不适宜洗车。',
    today: {
      level: '较适宜',
      levelClass: 'indices-cw-level--2',
      content: '较适宜洗车，未来一天无雨，风力较小，擦洗一新的汽车至少能保持一天。'
    },
    future: [
      {
        week: '周二',
        date: '09月16日',
        level: '较适宜',
        levelClass: 'indices-cw-level--2',
        content: '较适宜洗车，未来一天无雨，风力较小，擦洗一新的汽车至少能保持一天。'
      },
      {
        week: '周三',
        date: '09月17日',
        level: '不宜',
        levelClass: 'indices-cw-level--4',
        content: '不宜洗车，未来24小时内有雨，如果在此期间洗车，雨水和路上的泥水可能会再次弄脏您的爱车。'
      },
      {
        week: '周四',
        date: '09月18日',
        level: '适宜',
        levelClass: 'indices-cw-level--1',
        content: '适宜洗车，未来持续两天无雨天气较好，适合擦洗汽车，蓝天白云、风和日丽将伴您的车子连日洁净。'
      }
    ]
  },
  drsg: {
    name: '穿衣',
    className: 'Dress',
    description: '穿衣指数是根据自然环境对人体感觉温度影响最主要的天空状况、气温、湿度及风等气象条件，对人们适宜穿着的服装进行分级，以提醒人们根据天气变化适当着装。一般来说，温度较低、风速较大，则穿衣指数级别较高。穿衣气象指数共分8级，指数越小，穿衣的厚度越薄。',
    today: {
      level: '炎热',
      levelClass: 'indices-drsg-level--8',
      content: '天气炎热，建议着短衫、短裙、短裤、薄型T恤衫等清凉夏季服装。'
    },
    future: [
      {
        week: '周二',
        date: '09月16日',
        level: '炎热',
        levelClass: 'indices-drsg-level--8',
        content: '天气炎热，建议着短衫、短裙、短裤、薄型T恤衫等清凉夏季服装。'
      },
      {
        week: '周三',
        date: '09月17日',
        level: '热',
        levelClass: 'indices-drsg-level--7',
        content: '天气热，建议着短裙、短裤、短薄外套、T恤等夏季服装。'
      },
      {
        week: '周四',
        date: '09月18日',
        level: '舒适',
        levelClass: 'indices-drsg-level--6',
        content: '建议着长袖T恤、衬衫加单裤等服装。年老体弱者宜着针织长袖衬衫、马甲和长裤。'
      }
    ]
  },
  flu: {
    name: '感冒',
    className: 'Flu',
    description: '感冒指数是根据天气变化确定感冒发生的几率，根据温度、湿度、风速、天气现象、温度日较差等气象因素计算而来。',
    today: {
      level: '少发',
      levelClass: 'indices-flu-level--1',
      content: '各项气象条件适宜，发生感冒机率较低。但请避免长期处于空调房间中，以防感冒。'
    },
    future: [
      {
        week: '周二',
        date: '09月16日',
        level: '少发',
        levelClass: 'indices-flu-level--1',
        content: '各项气象条件适宜，发生感冒机率较低。但请避免长期处于空调房间中，以防感冒。'
      },
      {
        week: '周三',
        date: '09月17日',
        level: '较易发',
        levelClass: 'indices-flu-level--3',
        content: '天气转凉，空气湿度较大，较易发生感冒，体质较弱的朋友请注意适当防护。'
      },
      {
        week: '周四',
        date: '09月18日',
        level: '少发',
        levelClass: 'indices-flu-level--1',
        content: '各项气象条件适宜，无明显降温过程，发生感冒机率较低。'
      }
    ]
  },
  sport: {
    name: '运动',
    className: 'Sport',
    description: '运动指数是考虑气象因素和环境对人体的影响，包括紫外线、风力、气压、温度、光照以及雨雪沙尘等，为广大老百姓提供的是否适宜运动的建议。运动指数分为3级，级数越高，就越不适宜运动。',
    today: {
      level: '较不宜',
      levelClass: 'indices-sport-level--3',
      content: '天气较热，较不宜晨练，若坚持室外运动，请选择阴凉处并注意防暑降温。'
    },
    future: [
      {
        week: '周二',
        date: '09月16日',
        level: '较不宜',
        levelClass: 'indices-sport-level--3',
        content: '天气较热，较不宜晨练，若坚持室外运动，请选择阴凉处并注意防暑降温。'
      },
      {
        week: '周三',
        date: '09月17日',
        level: '较适宜',
        levelClass: 'indices-sport-level--2',
        content: '天气较好，但因气温较高且风力较强，请适当降低运动强度，户外运动注意防晒。'
      },
      {
        week: '周四',
        date: '09月18日',
        level: '适宜',
        levelClass: 'indices-sport-level--1',
        content: '天气较好，赶快投身大自然参与户外运动，尽情感受运动的快乐吧。'
      }
    ]
  },
  trav: {
    name: '旅游',
    className: 'Travel',
    description: '旅游指数是从天气的角度出发给市民提供的出游建议。一般天气晴好，温度适宜的情况下最适宜出游；而酷热或严寒的天气条件下，则不适宜外出旅游。旅游指数还综合了体感指数、穿衣指数、感冒指数、紫外线指数等生活气象指数，给市民提供更加详细实用的出游提示。',
    today: {
      level: '一般',
      levelClass: 'indices-trav-level--3',
      content: '天气较热，微风，外出旅游请注意防暑降温，避免长时间在烈日下暴晒。'
    },
    future: [
      {
        week: '周二',
        date: '09月16日',
        level: '一般',
        levelClass: 'indices-trav-level--3',
        content: '天气较热，微风，外出旅游请注意防暑降温，避免长时间在烈日下暴晒。'
      },
      {
        week: '周三',
        date: '09月17日',
        level: '适宜',
        levelClass: 'indices-trav-level--1',
        content: '天气较好，温度适宜，但风稍微有点大。这样的天气适宜旅游，您可以尽情地享受大自然的风光。'
      },
      {
        week: '周四',
        date: '09月18日',
        level: '适宜',
        levelClass: 'indices-trav-level--1',
        content: '天气较好，温度适宜，是个好天气哦。这样的天气适宜旅游，您可以尽情地享受大自然的风光。'
      }
    ]
  },
  uv: {
    name: '紫外线',
    className: 'Uv',
    description: '紫外线指数是指那一天中当太阳处于天空中最高点时实际紫外线辐射的强度，通常这发生在太阳正午的前后四个小时中，可以帮助人们评估紫外线对人体可能造成的伤害。紫外线指数一般用0—11+表示，数值越大，表示紫外线对人体危害就越大。',
    today: {
      level: '很强',
      levelClass: 'indices-uv-level--4',
      content: '紫外线辐射极强，建议涂擦SPF20以上、PA++的防晒护肤品，尽量避免暴露于日光下。'
    },
    future: [
      {
        week: '周二',
        date: '09月16日',
        level: '强',
        levelClass: 'indices-uv-level--3',
        content: '紫外线辐射强，建议涂擦SPF20左右、PA++的防晒护肤品。避免在10点至14点暴露于日光下。'
      },
      {
        week: '周三',
        date: '09月17日',
        level: '弱',
        levelClass: 'indices-uv-level--1',
        content: '紫外线强度较弱，建议出门前涂擦SPF在12-15之间、PA+的防晒护肤品。'
      },
      {
        week: '周四',
        date: '09月18日',
        level: '中等',
        levelClass: 'indices-uv-level--2',
        content: '属中等强度紫外线辐射天气，外出时建议涂擦SPF高于15、PA+的防晒护肤品，戴帽子、太阳镜。'
      }
    ]
  },
  air: {
    name: '空气污染扩散',
    className: 'Air',
    description: '空气污染扩散条件指数是不考虑污染源的情况下，从气象角度出发，对未来大气污染物的稀释、扩散、聚积和清除能力进行评价，主要考虑的气象因素是温度、湿度、风速和天气现象，对气象条件进行分级。空气污染扩散条件指数分为5级，级数越高气象条件越不利于污染物的扩散。',
    today: {
      level: '较差',
      levelClass: 'indices-air-level--4',
      content: '气象条件较不利于空气污染物稀释、扩散和清除，请适当减少室外活动时间。'
    },
    future: [
      {
        week: '周二',
        date: '09月16日',
        level: '较差',
        levelClass: 'indices-air-level--4',
        content: '气象条件较不利于空气污染物稀释、扩散和清除，请适当减少室外活动时间。'
      },
      {
        week: '周三',
        date: '09月17日',
        level: '良',
        levelClass: 'indices-air-level--2',
        content: '气象条件有利于空气污染物稀释、扩散和清除，可在室外正常活动。'
      },
      {
        week: '周四',
        date: '09月18日',
        level: '良',
        levelClass: 'indices-air-level--2',
        content: '气象条件有利于空气污染物稀释、扩散和清除，可在室外正常活动。'
      }
    ]
  }
})

// 获取当前位置
const getCurrentLocation = () => {
  return new Promise((resolve) => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        async (position) => {
          currentLocation.value.latitude = position.coords.latitude
          currentLocation.value.longitude = position.coords.longitude

          // 获取城市信息
          await getCityInfo(position.coords.longitude, position.coords.latitude)
          resolve()
        },
        (error) => {
          console.error('获取位置失败:', error)
          // 使用默认位置
          resolve()
        },
        {
          enableHighAccuracy: true,
          timeout: 5000,
          maximumAge: 0
        }
      )
    } else {
      console.log('浏览器不支持地理定位')
      resolve()
    }
  })
}

// 获取城市信息
const getCityInfo = async (longitude, latitude) => {
  try {
    const response = await axios.get(
      `${API_BASE_URL}/geo/v2/city/lookup`,
      {
        params: {
          location: `${longitude.toFixed(2)},${latitude.toFixed(2)}`,
          key: API_KEY,
          lang: 'zh'
        }
      }
    )

    if (response.data && response.data.code === '200' && response.data.location) {
      const location = response.data.location[0]
      currentLocation.value.city = location.adm2 || location.name
      currentLocation.value.district = location.name
    }
  } catch (error) {
    console.error('获取城市信息失败:', error)
  }
}

// 获取生活指数数据
const fetchIndicesData = async () => {
  try {
    // 所有指数类型
    const allTypes = Object.values(indexTypes).map(t => t.type).join(',')

    const response = await axios.get(
      `${API_BASE_URL}/v7/indices/1d`,
      {
        params: {
          location: `${currentLocation.value.longitude.toFixed(2)},${currentLocation.value.latitude.toFixed(2)}`,
          key: API_KEY,
          type: allTypes,
          lang: 'zh'
        }
      }
    )

    if (response.data && response.data.code === '200' && response.data.daily) {
      const dailyData = response.data.daily

      // 获取未来几天的数据
      const forecastResponse = await axios.get(
        `${API_BASE_URL}/v7/indices/3d`,
        {
          params: {
            location: `${currentLocation.value.longitude.toFixed(2)},${currentLocation.value.latitude.toFixed(2)}`,
            key: API_KEY,
            type: allTypes,
            lang: 'zh'
          }
        }
      )

      // 更新数据
      updateIndexData(dailyData, forecastResponse.data.daily || [])
    } else {
      console.log('没有获取到生活指数数据，使用默认数据')
    }
  } catch (error) {
    console.error('获取生活指数数据失败:', error)
    // 使用默认数据
  } finally {
    loading.value = false
  }
}

// 更新指数数据
const updateIndexData = (todayData, futureData) => {
  Object.keys(indexTypes).forEach(key => {
    const typeInfo = indexTypes[key]
    // 确保数据匹配正确的类型
    const todayItem = todayData.find(item => item.type === typeInfo.type)

    if (todayItem) {
      // 更新今天的数据
      if (indexData.value[key]) {
        indexData.value[key].today = {
          level: todayItem.category || todayItem.name,
          levelClass: `indices-${key}-level--${todayItem.level}`,
          content: todayItem.text
        }

        // 更新未来几天的数据
        const futureDays = futureData.filter(item => {
          return item.type === typeInfo.type && item.date !== todayItem.date
        }).slice(0, 3)

        indexData.value[key].future = futureDays.map((day, index) => {
          const date = new Date(day.date)
          const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
          const weekDay = index === 0 ? '明天' : weekDays[date.getDay()]

          return {
            week: weekDay,
            date: `${(date.getMonth() + 1).toString().padStart(2, '0')}月${date.getDate().toString().padStart(2, '0')}日`,
            level: day.category || day.name,
            levelClass: `indices-${key}-level--${day.level}`,
            content: day.text
          }
        })
      }
    }
  })
}

// 获取当前选中指数的数据
const currentIndexData = computed(() => {
  return indexData.value[selectedIndex.value] || indexData.value.comf
})

// 组件加载时获取数据
onMounted(async () => {
  // 获取位置
  await getCurrentLocation()
  // 获取生活指数数据
  await fetchIndicesData()
})

// 选择指数
const selectIndex = (index) => {
  selectedIndex.value = index
}
</script>

<style scoped>
/* 基础样式 */
.body-content {
  position: relative;
  min-height: 100%;
  padding-bottom: 341px;
}

.body-content--subpage {
  padding-top: 0;
}

.l-page-city-indices {
  padding: 20px 0 40px;
}

.container {
  max-width: 1200px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
}

/* 布局样式 */
.qweather-layout {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.qweather-list {
  flex: 1 0 auto;
  width: 0;
}

.qweather-list .qweather-list__row {
  margin: 0 0 20px;
  background: none;
  border: none;
  padding: 0;
}

.qweather-list .qweather-list__row:last-child {
  margin: 0;
}

.qweather-menu {
  flex: 0 0 300px;
  width: 0;
  max-width: 300px;
  margin-left: 20px;
}

/* 生活指数详情 */
.c-city-indices-detail {
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.indices-detail__top {
  margin-bottom: 30px;
}

/* 生活指数网格布局 */
.indices-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  justify-items: center;
}

.indices-detail-top__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 20px 15px;
  border-radius: 12px;
  min-width: 100px;
  min-height: 100px;
  background: #F8F9FA;
  border: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.indices-detail-top__item:hover {
  background: #E3F2FD;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  border-color: #2196F3;
}

.indices-detail-top__item.active {
  background: #2196F3;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(33, 150, 243, 0.3);
}

.indices-detail-top__item.active p {
  color: white;
}

.indices-detail-top__item p {
  margin: 12px 0 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-align: center;
  line-height: 1.2;
}

/* 生活指数图标 */
.indices-icons {
  width: 48px;
  height: 48px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.indices-icons.comf {
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='20' fill='%234CAF50' opacity='0.2'/%3E%3Cpath d='M16 20 Q24 12 32 20 L32 28 Q24 36 16 28 Z' fill='%234CAF50'/%3E%3Ccircle cx='19' cy='22' r='2' fill='white'/%3E%3Ccircle cx='29' cy='22' r='2' fill='white'/%3E%3Cpath d='M18 28 Q24 32 30 28' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

.indices-icons.cw {
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='20' fill='%232196F3' opacity='0.2'/%3E%3Crect x='14' y='14' width='20' height='16' rx='2' fill='%232196F3'/%3E%3Crect x='16' y='16' width='16' height='12' rx='1' fill='white'/%3E%3Ccircle cx='30' cy='20' r='2' fill='%232196F3'/%3E%3Cpath d='M12 32 Q24 28 36 32' stroke='%232196F3' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

.indices-icons.drsg {
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23FF9800' opacity='0.2'/%3E%3Ccircle cx='24' cy='16' r='4' fill='%23FF9800'/%3E%3Cpath d='M18 22 L18 34 L30 34 L30 22' stroke='%23FF9800' stroke-width='3' fill='none'/%3E%3Cpath d='M18 22 L30 22' stroke='%23FF9800' stroke-width='3'/%3E%3C/svg%3E");
}

.indices-icons.flu {
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23F44336' opacity='0.2'/%3E%3Cpath d='M18 20 Q24 16 30 20 Q30 24 24 28 Q18 24 18 20' fill='%23F44336'/%3E%3Crect x='22' y='14' width='4' height='6' fill='%23F44336'/%3E%3Ccircle cx='20' cy='30' r='2' fill='%23F44336'/%3E%3Ccircle cx='28' cy='30' r='2' fill='%23F44336'/%3E%3C/svg%3E");
}

.indices-icons.sport {
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23009688' opacity='0.2'/%3E%3Ccircle cx='24' cy='18' r='3' fill='%23009688'/%3E%3Cpath d='M21 22 L21 32 M27 22 L27 32' stroke='%23009688' stroke-width='3'/%3E%3Cpath d='M18 26 L30 26' stroke='%23009688' stroke-width='2'/%3E%3Ccircle cx='18' cy='32' r='2' fill='%23009688'/%3E%3Ccircle cx='30' cy='32' r='2' fill='%23009688'/%3E%3C/svg%3E");
}

.indices-icons.trav {
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23673AB7' opacity='0.2'/%3E%3Cpath d='M12 28 L20 20 L28 24 L36 16' stroke='%23673AB7' stroke-width='3' fill='none'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23673AB7'/%3E%3Ccircle cx='28' cy='24' r='2' fill='%23673AB7'/%3E%3Crect x='18' y='28' width='12' height='6' rx='1' fill='%23673AB7'/%3E%3C/svg%3E");
}

.indices-icons.uv {
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23FFC107' opacity='0.2'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%23FFC107'/%3E%3Cpath d='M24 8 L24 12 M24 36 L24 40 M40 24 L36 24 M12 24 L8 24 M35.4 12.6 L32.8 15.2 M15.2 32.8 L12.6 35.4 M35.4 35.4 L32.8 32.8 M15.2 15.2 L12.6 12.6' stroke='%23FFC107' stroke-width='2'/%3E%3C/svg%3E");
}

.indices-icons.air {
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23607D8B' opacity='0.2'/%3E%3Cpath d='M12 20 Q18 16 24 20 Q30 24 36 20' stroke='%23607D8B' stroke-width='2' fill='none'/%3E%3Cpath d='M12 24 Q18 20 24 24 Q30 28 36 24' stroke='%23607D8B' stroke-width='2' fill='none'/%3E%3Cpath d='M12 28 Q18 24 24 28 Q30 32 36 28' stroke='%23607D8B' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

/* 生活指数说明文字 */
.indices-detail__txt {
  font-size: 14px;
  line-height: 1.8;
  color: #666;
  margin: 0 0 30px 0;
  padding: 20px;
  background: #F5F7FA;
  border-radius: 8px;
}

/* 生活指数预报 */
.indices-detail__forecast--bg {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f0fe 100%);
  border-radius: 12px;
  padding: 24px;
  margin-top: 20px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.indices-detail__forecast {
  max-width: 100%;
}

.indices-forecast__row {
  display: flex;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.6);
  gap: 20px;
}

.indices-forecast__row:last-child {
  border-bottom: none;
}

.indices-forecast__space {
  flex: 0 0 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.week-date p {
  margin: 0;
  line-height: 1.3;
}

.week-date p:first-child {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.week-date p:last-child {
  font-size: 13px;
  color: #666;
}

.indices-forecast__detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.indices-forecast__tag {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.indices-forecast__txt {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  padding: 12px 16px;
  background: rgba(255,255,255,0.7);
  border-radius: 8px;
  border-left: 3px solid #2196F3;
}

/* 各指数级别的颜色 */
/* 舒适度 */
.indices-comf-level--1 { background: #4CAF50; }
.indices-comf-level--2 { background: #8BC34A; }
.indices-comf-level--3 { background: #CDDC39; }
.indices-comf-level--4 { background: #FFEB3B; }
.indices-comf-level--5 { background: #FFC107; }
.indices-comf-level--6 { background: #FF9800; }
.indices-comf-level--7 { background: #FF5722; }

/* 洗车 */
.indices-cw-level--1 { background: #4CAF50; }
.indices-cw-level--2 { background: #8BC34A; }
.indices-cw-level--3 { background: #FFC107; }
.indices-cw-level--4 { background: #FF5722; }

/* 穿衣 */
.indices-drsg-level--1 { background: #03A9F4; }
.indices-drsg-level--2 { background: #00BCD4; }
.indices-drsg-level--3 { background: #009688; }
.indices-drsg-level--4 { background: #4CAF50; }
.indices-drsg-level--5 { background: #8BC34A; }
.indices-drsg-level--6 { background: #CDDC39; }
.indices-drsg-level--7 { background: #FFC107; }
.indices-drsg-level--8 { background: #FF5722; }

/* 感冒 */
.indices-flu-level--1 { background: #4CAF50; }
.indices-flu-level--2 { background: #FFC107; }
.indices-flu-level--3 { background: #FF9800; }
.indices-flu-level--4 { background: #FF5722; }

/* 运动 */
.indices-sport-level--1 { background: #4CAF50; }
.indices-sport-level--2 { background: #FFC107; }
.indices-sport-level--3 { background: #FF5722; }

/* 旅游 */
.indices-trav-level--1 { background: #4CAF50; }
.indices-trav-level--2 { background: #8BC34A; }
.indices-trav-level--3 { background: #FFC107; }
.indices-trav-level--4 { background: #FF5722; }

/* 紫外线 */
.indices-uv-level--1 { background: #4CAF50; }
.indices-uv-level--2 { background: #8BC34A; }
.indices-uv-level--3 { background: #FFC107; }
.indices-uv-level--4 { background: #FF9800; }
.indices-uv-level--5 { background: #FF5722; }

/* 空气污染扩散 */
.indices-air-level--1 { background: #4CAF50; }
.indices-air-level--2 { background: #8BC34A; }
.indices-air-level--3 { background: #CDDC39; }
.indices-air-level--4 { background: #FFC107; }
.indices-air-level--5 { background: #FF5722; }

/* 工具类 */
.d-flex {
  display: flex;
}

.align-items-start {
  align-items: flex-start;
}

.align-items-center {
  align-items: center;
}

.justify-content-between {
  justify-content: space-between;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .c-city-indices-detail {
    padding: 20px;
  }
  
  .indices-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .indices-detail-top__item {
    min-width: 80px;
    min-height: 80px;
    padding: 15px 10px;
  }
  
  .indices-icons {
    width: 40px;
    height: 40px;
  }
  
  .indices-detail-top__item p {
    font-size: 12px;
  }
  
  .indices-forecast__space {
    flex: 0 0 80px;
  }
  
  .indices-forecast__row {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 739px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .qweather-layout {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
  }
  
  .qweather-layout .qweather-list {
    flex: 1 0 100%;
    width: 100%;
    max-width: 100%;
  }
  
  .qweather-layout .qweather-list .qweather-list__row {
    margin: 0 0 12px;
  }
  
  .qweather-layout .qweather-menu {
    flex: 1 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 12px 0 0;
  }
}
</style>